<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
	var t = n =0, x;
	$(document).ready(function(){    
		        x=$("#pic a").length;
		        $("#pic a:not(:first-child)").hide();
		        
		      //数遍划过LI的效果 
		        $("#banner li").mouseover(function() {
		            var i = $(this).text() -1;//获取Li元素内的值，即1，2，3，4
		            n = i;
		            if (i >= x) return;

		            $("#pic a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);
		            document.getElementById("banner").style.background="";
		            $(this).toggleClass("on");
		            $(this).siblings().removeAttr("class");
		         })  
		      //设置定时器，轮播图片       		         		         
		        t = setInterval("showAuto()", 3000);
		        $("#banner").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 3000);});
		      //设置按钮  
		        $('#banner').hover(function(){$('.btn').show();},function(){$('.btn').hide();});
		        $(".next").click(function(){
		        		n = n >=(x -1) ?0 : ++n;
		         		$("#pic a").filter(":visible").fadeOut(500).parent().children().eq(n).fadeIn(1000);
		            document.getElementById("banner").style.background="";
		            $("#banner li").eq(n).toggleClass("on");
		            $("#banner li").eq(n).siblings().removeAttr("class");
		        })
		        $(".prev").click(function(){
		        		n = n <=(1-x) ?0 : --n;
		         		$("#pic a").filter(":visible").fadeOut(500).parent().children().eq(n).fadeIn(1000);
		            document.getElementById("banner").style.background="";
		            $("#banner li").eq(n).toggleClass("on");
		            $("#banner li").eq(n).siblings().removeAttr("class");
		        	
		        })
		        
	});
		        
	function showAuto()
		    {
		        n = n >=(x -1) ?0 : ++n;
		         $("#pic a").filter(":visible").fadeOut(500).parent().children().eq(n).fadeIn(1000);
		           document.getElementById("banner").style.background="";
		            $("#banner li").eq(n).toggleClass("on");
		            $("#banner li").eq(n).siblings().removeAttr("class");
		    }
		    

</script>
<style type="text/css">
  *{margin:0;padding: 0;}	
  #banner {position:relative; width:730px; height:454px;margin: 30px auto; overflow:hidden;}
  #pic img {border:0px;display: block;}
  #banner ul {position:absolute;list-style-type:none;z-index:1002;
			        margin:0; padding:0; bottom:10px; right:30%;}
	#banner ul li {margin-right: 10px; padding:0px 8px;float:left;display:block;color:#FFF;border-radius: 50%;background:#666666;cursor:pointer}
	#banner ul li.on { background:#900}
	#pic a{position:absolute;}
	.btn{display: none;opacity: .4;}
	.btn span{display: block;width: 50px;height: 100px;background:#000;color: #fff;font-size: 40px;line-height: 100px;text-align: center;cursor:pointer;}
  .btn .prev{position: absolute;left: 0;top: 50%;margin-top: -50px;}
  .btn .next{position: absolute;right: 0;top: 50%;margin-top: -50px;}
</style>
</head>
<body>
<div id="banner">
	<ul id="list">
		<li class="on">1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
	</ul>
	<div id="pic">
		<a href="#" target="_blank"><img src="jing/1.jpg" title="jd" alt="jd"/></a>
		<a href="#" target="_blank"><img src="jing/2.jpg" title="jd" alt="jd"/></a>
		<a href="#" target="_blank"><img src="jing/3.jpg" title="jd" alt="jd"/></a>
		<a href="#" target="_blank"><img src="jing/4.jpg" title="jd" alt="jd"/></a>
		<a href="#" target="_blank"><img src="jing/5.jpg" title="jd" alt="jd"/></a>
		<a href="#" target="_blank"><img src="jing/6.jpg" title="jd" alt="jd"/></a>
	</div>
	<div class="btn">
    <span class="prev"><</span>
    <span class="next">></span>
  </div>
	
</div>
</body>
</html>